<template>
  <el-cascader
    clearable
    v-model="selectedIds"
    :options="list"
    :props="opts"
    change-on-select
    @change="onChange2"
  ></el-cascader>
</template>


<script>
import { getGoodsListAPI } from "@/api";


export default {
  data () {
    return {
      selectedIds: [],
      list: [],
      opts: {
        expandTrigger: "hover",
        label: "cat_name",
        value: "cat_id"
      }
    };
  },
  props: {
    // 1-加载1级分类，2-加载1,2级分类 ，3-加载1,2,3 级分类
    level: {
      type: Number,
      value: 3
    },
    onChange: {
      type: Function,
      required: true
    }
  },
  methods: {
    // 选择框选项改变事件
    onChange2 () {
      // 如果选中的不是三级分类  则清空选项
      if (this.selectedIds.length < 3) this.selectedIds = []
      // 调用 父组件的 方法，并传入 当前 选中的 元素id数组
      this.onChange(this.selectedIds)
    }
  },
  async created () {
    const { data: res } = await getGoodsListAPI({ type: this.level });
    // console.log(res);
    this.list = res.data;
  }
};
</script>


<style>
</style>